<template>
  <div class="conversion">
    <div class="panel-search-top">
      <el-form :model="searchform" :inline="true" size="mini">
        <el-form-item label="日期">
          <el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="会话类别">
          <el-select placeholder="会话类别" v-model="searchform.conversiontype">
            <el-option label="日志" value="日志"></el-option>
            <el-option label="WEB会话" value="WEB会话"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="业务系统">
          <el-select placeholder="业务系统" v-model="searchform.type2">
            <el-option label="PMS-数据库-主机名" value="PMS-数据库-主机名"></el-option>
            <el-option label="2" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <div class="content">
      <div class="type1" v-if="searchform.conversiontype=='111WEB会话'">
        <div class="panel">
          <div class="panel-title icon-KPIindexname">
            日志统计折线图
          </div>
          <div class="panel-con">
            <div id="echart1">
              <diagram-echarts :data="diagramEcharts.echart1" :show="diagram.echart1" type="style1"></diagram-echarts>
            </div>
          </div>
        </div>
        <el-table :data="json.portraitC1">
          <el-table-column prop="c1" label="事件描述" width="123">
          </el-table-column>
          <el-table-column prop="c2" label="子分类" width="95">
          </el-table-column>
          <el-table-column prop="c3" label="日志信息">
          </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" :total="1000">
        </el-pagination>

      </div>
      <div class="type2">

        <el-table :data="json.portraitC1">
          <el-table-column prop="c1" label="序号" width="50">
          </el-table-column>
          <el-table-column prop="c2" label="开始时间" width="130">
          </el-table-column>
          <el-table-column prop="c3" label="结束时间" width="130">
          </el-table-column>
          <el-table-column prop="c4" label="客户端IP" width="84">
          </el-table-column>
          <el-table-column prop="c5" label="服务端IP" width="87">
          </el-table-column>
          <el-table-column prop="c6" label="省份" width="50">
          </el-table-column>
          <el-table-column prop="c7" label="地市" width="57">
          </el-table-column>
          <el-table-column prop="c8" label="URL路径">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="bottom">
                111111111111111111111111111111
                <div slot="reference" class="name-wrapper">
                  111
                </div>
              </el-popover>

            </template>
          </el-table-column>
          <el-table-column prop="c9" label="HTTP返回码" width="100">
          </el-table-column>
          <el-table-column prop="c9" label="响应时间" width="80">
          </el-table-column>
          <el-table-column prop="c9" label="服务器时延" width="90">
          </el-table-column>
          <el-table-column prop="c9" label="客户端时延长" width="100">
          </el-table-column>
          <el-table-column prop="c9" label="网络通信时延" width="100">
          </el-table-column>
          <el-table-column prop="c9" label="详细" width="50">
            <template slot-scope="scope">
              <a @click="dialogVisible = true">详细</a>
            </template>
          </el-table-column>
        </el-table>
        <div class="compage">
          <el-pagination background layout="prev, pager, next" :total="1000">
          </el-pagination>
        </div>

        <div class="fukuangcon" :style="`display:${funkuang.display};left:${funkuang.left}px;top:${funkuang.top}px`">fdasfasfdaf</div>
      </div>

    </div>
    <el-dialog title="详细内容" width="650px" :visible.sync="dialogVisible">
      <el-table :data="json.portraitC1" height="465">
        <el-table-column property="c1" label="时间" width="126"></el-table-column>
        <el-table-column property="c2" label="详细内容"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import Data from "../data/index";
import diagramEcharts from "../components/portrait/echarts";
export default {
  name: "Conversion",
  data() {
    return {
      dialogAddForm: {
        name: "",
        ip: "",
        desc:""
      },
      funkuang: {
        left: 0,
        top: 0,
        display: "none"
      },
      dialogVisible: false,
      searchform: {
        conversiontype: "日志",
        type2: "PMS-数据库-主机名"
      },
      diagram: {
        echart1: true
      },
      diagramEcharts: {
        echart1: {
          xAxisData: [
            "10:00",
            "11:00",
            "12:00",
            "13:00",
            "14:00",
            "15:00",
            "16:00",
            "17:00",
            "18:00"
          ],
          color: ["#00796A"],
          series: [
            {
              type: "line",
              symbolSize: "5",
              areaStyle: {
                normal: {
                  color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "#01A38F"
                      },
                      {
                        offset: 1,
                        color: "rgba(255,255,255,0)"
                      }
                    ]
                  }
                }
              },
              data: [
                { value: 10 },
                { value: 7 },
                { value: 10 },
                { value: 10 },
                { value: 10 },
                { value: 10 },
                { value: 20 },
                { value: 10 },
                { value: 10 }
              ]
            }
          ]
        }
      },
      json: {
        portraitC1: Data.portraitC1
      }
    };
  },
  components: {
    diagramEcharts
  },
  mounted() {
    this.initEcharts();
  },
 methods: {
    dialogAddSubmit(){
      if(this.dialogAddForm.name.length < 3 || this.dialogAddForm.name.length > 10 ){
        alert('长度不小于数字3字符或3个字母或3个中文字符， 最大不超10个中文字符');
        return;
      }
      let reg = /(((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))\.){3}((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))/;
       if (!reg.test(this.dialogAddForm.ip)) {
        alert("只允许IPv4地址由4组数字组成，每组数字之间以.分隔，每组数字的取值范围是0~255");
        return false;
      }
       if(this.dialogAddForm.desc   > 30 ){
        alert('备注信息最大不超30个中文字符');
        return;
      }

    },
    initEcharts() {
      let seriesData = [];
      for (var i = 0; i < 12; i++) {
        seriesData.push({
          type: "bar",
          barWidth: 4,
          data: [100, 200, 100, 200, 100, 200, 100, 200, 100]
        });
      }
      this.diagramEcharts.c1.series = seriesData;
    },
    mouseover(e) {
      this.funkuang.left = e.screenX;
      this.funkuang.top = e.screenY - 108;
      this.funkuang.display = "block";
      console.log(e);
    },
    mouseout(e) {
      this.funkuang.display = "none";
      console.log(e);
    }
  }
};
</script>
<style lang="scss">
@import url(../assets/css/base.css);
</style>
<style lang="scss" scoped>
.conversion {
  .fukuangcon {
    // display: none;
    background: rgba(255, 255, 255, 1);
    width: 176px;
    height: 108px;
    box-shadow: 0px 1px 10px 0px rgba(17, 116, 104, 0.18);
    border: 1px solid rgba(12, 112, 100, 1);
    position: fixed;
    top: 10px;
    z-index: 999;
  }
  #echart1 {
    height: 192px;
  }
  .content {
    padding: 20px;
  }
  .panel .panel-title {
    margin-top: 0px;
  }
  .panel2 {
    .title {
      font-size: 14px;
      color: rgba(51, 51, 51, 1);
      line-height: 20px;
      height: 35px;
    }
  }
}
</style>

